<!DOCTYPE html>
<html ng-app="bosunApp">
	<head>
		<title ng-bind="'Bosun &mdash; ' + title"></title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="/static/css/bootstrap.min.css" rel="stylesheet">
		<link href="/static/css/jquery-ui.min.css" rel="stylesheet">
		<link href="/static/css/font-awesome.min.css" rel="stylesheet">
		<style>
			.disabled, .disabled:hover {
				cursor: not-allowed;
				color: #999999 !important;
			}
			.navbar-static-top {
				margin-bottom: 19px;
			}
			#logo {
				position: absolute;
				top: 7.5px; /* (navbar height (40 in variables.less) - size of logo (25 in 0-bosun.ts)) / 2 */
			}
			#logo-text {
				margin-left: 38px;
				font-size: 28px;
				color: #1f5296;
				letter-spacing: -1px;
			}
			.tablesorter-headerAsc .tablesorter-header-inner::before {
				content: '▲';
			}
			.tablesorter-headerDesc .tablesorter-header-inner::before {
				content: '▼';
			}

			.panel-heading {
				cursor: pointer; cursor: hand;
			}

			.panel-title {
				font-size: 15px;
			}

			label.select {
				margin-left: 12px;
				margin-top: -2px;
			}
			.with-selected {
				margin-right: 5px;
				border-right: 1px solid #ccc;
				padding-right: 5px;
			}

			svg {
				font: 10px sans-serif;
			}
			.axis path, .axis line, .focus line {
				fill: none;
				stroke: #000;
				shape-rendering: crispEdges;
			}
			.line {
				fill: none;
				stroke-width: 1px;
				shape-rendering: auto;
			}
			.ylabel {
				font: 12px sans-serif;
			}

			.tl-axis path, .tl-axis line {
				stroke-width: 1;
			}
			.tl-normal {
				fill: #3c763d;
			}
			.tl-critical, .tl-error {
				fill: #A94442;
			}
			.tl-warning {
				fill: #faebcc;
			}
			.tl-unknown {
				fill: #d9edf7;
			}
			.tl-legend {
				font-weight: bold;
				margin-bottom: 10px;
				border-color: black;
				border-width: 2px;
			}

			.icon-smaller {
				font-size: 0.7em;
			}

			[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
		</style>
	</head>
	<body ng-controller="BosunCtrl" ng-init="init({{.Settings}})">
		<div class="navbar navbar-default navbar-static-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="/">
						<div id="logo"></div>
						<div id="logo-text">Bosun</div>
					</a>
				</div>
				<div class="navbar-collapse collapse" id="navbar-collapse">
					<ul class="nav navbar-nav">
						<li ng-class="active('items')">
							<a ng-if="opentsdbEnabled" href="/items" ng-cloak>Items</a>
							<a ng-if="!opentsdbEnabled" class="disabled" tooltip title="Items available for configured OpenTSDB datasource" href="javascript:void(0)" ng-cloak>Items</a>
						</li>
						<li ng-show="opentsdbEnabled" ng-class="active('graph')"><a href="/graph">Graph</a></li>
						<li ng-class="active('expr')"><a href="/expr">Expression</a></li>
						<li ng-class="active('config')"><a href="/config">Rule Editor</a></li>
						<li ng-class="active('silence')"><a href="/silence">Silence</a></li>
						<li ng-show="annotateEnabled" ng-class="active('annotation')" ng-cloak><a href="/annotation">Submit Annotation</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li ng-if="quiet" class="navbar-text alert-danger" ng-cloak>Quiet Mode Enabled</li>
						<li ng-cloak>
							<button class="btn btn-default navbar-btn btn-sm" ng-click="shorten()" ng-hide="shortlink">Short Link</button>
							<input type="text" class="navbar-btn btn-sm form-control input-sm" id="shortlink" ng-show="shortlink">
						</li>

						{{ $Username := "{{auth.Username()}}" }}
						<li ng-if="auth.Enabled() || tokensEnabled" class="dropdown" ng-cloak><a href="#" class="dropdown-toggle" data-toggle="dropdown" ><span class='fa fa-user'></span> {{$Username}} <i class="fa fa-caret-down" aria-hidden="true"></i></a>
							<ul class="dropdown-menu">
								<li ng-if="auth.Enabled()"><a href="/login/out" target='_self'>Log out</a></li>
								<li ng-if="tokensEnabled && auth.HasPermission('Manage Tokens')"><a href="/tokens">Manage Auth Tokens</a></li>
							</ul>
						</li>
						<li ng-cloak class='navbar-text' ng-if="!auth.Enabled() && !tokensEnabled"><span class='fa fa-user'></span> {{ $Username }}</li>
						<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-question-circle fa-lg" aria-hidden="true"></i> <i class="fa fa-caret-down" aria-hidden="true"></i></a>
							<ul class="dropdown-menu">
								<li class="dropdown-header">Main Documentation</li>
								<li><a href="https://bosun.org/usage" target="_blank">Usage 
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://bosun.org/expressions" target="_blank">Expression Language 
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://bosun.org/definitions" target="_blank">Definitions (RuleConf) 
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://bosun.org/system_configuration" target="_blank">System Configuration 
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://bosun.org/api" target="_blank">API Endpoints 
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://bosun.org/resources" target="_blank">Other Resouces List
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li class="dropdown-header">Other Resources</li>
								<li><a href="https://github.com/bosun-monitor/bosun" target="_blank">
									<i class="fa fa-github" aria-hidden="true"></i>
									Bosun Project on Github
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://bosun.slack.com/" target="_blank">
									<i class="fa fa-slack" aria-hidden="true"></i>
									Slack Chat Room
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://bosun.org/slackInvite" target="_blank">
									<i class="fa fa-slack" aria-hidden="true"></i>
									Slack Inviter
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://stackoverflow.com/questions/tagged/bosun" target="_blank">
									<i class="fa fa-stack-overflow" aria-hidden="true"></i>
									Stack Overflow Bosun Tag
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
								<li><a href="https://stackoverflow.com/documentation/bosun/topics" target="_blank">
									<i class="fa fa-stack-overflow" aria-hidden="true"></i>
									Stack Overflow Bosun Docs and Examples
									<i class="fa fa-external-link icon-smaller" aria-hidden="true"></i></a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-lg-12" ng-view>
				</div>
			</div>
		</div>
		<script src="/static/js/jquery.min.js"></script>
		<script src="/static/js/jquery-ui.js"></script>
		<script src="/static/js/underscore-min.js"></script>
		<script src="/static/js/angular.min.js"></script>
		<script src="/static/js/angular-route.min.js"></script>
		<script src="/static/js/angular-sanitize.min.js"></script>
		<script src="/static/js/angular-strap.js"></script>
		<script src="/static/js/angular-strap.tpl.min.js"></script>
		<script src="/static/js/ace/ace.js"></script>
		<script src="/static/js/angular-ace.js"></script>
		<script src="/static/js/bootstrap.min.js"></script>
		<script src="/static/js/moment.min.js"></script>
		<script src="/static/js/moment-duration-format.min.js"></script>
		<script src="/static/js/d3.v3.min.js"></script>
		<script src="/static/js/jquery.tablesorter.min.js"></script>
		<script src="/static/js/FileSaver.min.js"></script>
		<script src="/static/js/clipboard.min.js"></script>
		<script src="/static/js/ngclipboard.min.js"></script>
		<script src="/static/js/bosun.js"></script>
		{{.Includes}}
	</body>
</html>
